<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>巡场日报</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/mint-ui@1/lib/style.css">
<script src="{{URL::asset('js/jquery.min.js')}}"></script>
<script src="{{URL::asset('js/echarts.js')}}"></script>
<script src="{{URL::asset('js/echarts-theme-candf.js')}}"></script>
<script src="https://unpkg.com/vue@1/dist/vue.js"></script>
<script src="https://unpkg.com/mint-ui@1/lib/index.js"></script>
<style media="screen">
#main .mint-header{
	background-color: #C30D23;
	color:#FFF;
	font-weight: 500;
}
body,html {
	height: 100%;overflow: hidden;margin: 0;padding: 0;
}
*,p,h1,h2,h3,h4,h5,label{
	margin: 0;padding: 0;
}
#main {
	height: 100%;
	padding-top:40px;
}
#main .content{
	height: 100%;padding:1.25rem;
	overflow-y: auto;
	background-color: #dcdfe6;
}
#main .chart-header .mint-cell {
	margin-top: 30px;background: #ecf0f5;
}
#main .auto-break{
	word-wrap: break-word;word-break: normal;
	text-align: center;
}
#main .content .mint-radiolist .mint-cell{
	background-color: #dcdfe6;
}
#mian .{
	margin-bottom: 30px;
}
#main .table thead th {
	vertical-align: bottom;
	border-bottom: 1px solid #c0c4cc;
}
#main .table td{
	padding: .75rem;
	vertical-align: top;
	border-top: 1px solid #c0c4cc;
}
.table-bordered td, .table-bordered th{
	border: 1px solid #c0c4cc;
}
.problem-box {
	margin-top: 30px;
	margin-bottom: 30px;
}
#main .problem-box .mint-cell{
	background-color: #f3f3f4;
}
#main .my-popup-box .mint-popup{
	width: 100%;
    height: 100%;
}
#main .pop-ct{
	width: 100%;
    height: 100%;
	background-color: #dcdfe6;
	overflow-y: auto;
	overflow-x: hidden;
}
#main .popup-content{
	margin-top:40px;height:calc(100%-40px);padding:0 15px;
}
</style>
</head>
<body>
<div id="main">
    <mt-header fixed :title="header_title">
        <mt-button icon="back" slot="left" @click="goTo('/admin')">返回</mt-button>
        <mt-button icon="more" slot="right" @click="pickerVisible = true;"></mt-button>
    </mt-header>
    <div class="content">
		<div id="chart_0" style="width: 100%;height:300px;margin:0 auto;"></div>
		<table class="table table-hover table-condensed">
			<thead>
				<tr class="text-center">
					<th style="background:#ecf0f5">今日总计</th>
					<th>今日</th>
					<th>上周同日</th>
				</tr>
			</thead>
			<tbody>
				<tr class="text-center">
					<td>发现</td>
					<td>{{$Data['total']['find']}}</td>
					<td>{{$Data['total']['find_last']}}</td>
				</tr>
				<tr class="text-center">
					<td>处理</td>
					<td>{{$Data['total']['solve']}}</td>
					<td>{{$Data['total']['solve_last']}}</td>
				</tr>
				<tr class="text-center">
					<td>处理率</td>
					<td>{{$Data['total']['rate']}}%</td>
					<td>{{$Data['total']['rate_last']}}%</td>
				</tr>
			</tbody>
		</table>
		<!-- C86 -->
		<div class="chart-header">
			<mt-cell title="{{$Data['campuses'][0]['campus']}}"
			 	value="发现:{{$Data['campuses'][0]['find']}}|处理:{{$Data['campuses'][0]['solve']}}|处理率:{{$Data['campuses'][0]['rate']}}%">
		 	</mt-cell>
		</div>
		<div id="chart_1" style="width: 300px;height:300px;margin:0 auto;"></div>
		<div id="chart_2" style="width: 300px;height:300px;margin:0 auto;"></div>
		<mt-radio
		  :value.sync="chart_type[0]" @change="chartToggleShow" :options="radio_opts">
		</mt-radio>
		<div class="problem-box">
			<h5>今日短期问题</h5>
			@foreach ($Data['campuses'][0]['problems'] as $problem)
			<div @click="showDetails({{$problem['params']}})">
				<mt-cell title="{{$problem['problem_type']}}" label="{{$problem['remark']}}" is-link>
					@if ($problem['is_handled'] == '1')
						<i class="mint-toast-icon mintui mintui-field-success text-success"></i>
					@else
						<i class="mint-toast-icon mintui mintui-field-warning text-warning"></i>
				   	@endif
				</mt-cell>
			</div>
			@endforeach
			<h5>长期待跟进问题</h5>
			@foreach ($Data['campuses'][0]['long_problems'] as $problem)
			<div @click="showDetails({{$problem['params']}})">
				<mt-cell title="{{$problem['problem_type']}}" label="{{$problem['remark']}}" is-link>
					@if ($problem['is_handled'] == '1')
						<i class="mint-toast-icon mintui mintui-field-success text-success"></i>
					@else
						<i class="mint-toast-icon mintui mintui-field-warning text-warning"></i>
				   	@endif
				</mt-cell>
			</div>
			@endforeach
		</div>
		<!-- 七彩 -->
		<div class="chart-header">
			<mt-cell title="{{$Data['campuses'][1]['campus']}}"
			 	value="发现:{{$Data['campuses'][1]['find']}}|处理:{{$Data['campuses'][1]['solve']}}|处理率:{{$Data['campuses'][1]['rate']}}">
		 	</mt-cell>
		</div>
		<div id="chart_3" style="width: 300px;height:300px;margin:0 auto;"></div>
		<div id="chart_4" style="width: 300px;height:300px;margin:0 auto;"></div>
		<mt-radio
		  :value.sync="chart_type[1]" @change="chartToggleShow" :options="radio_opts">
		</mt-radio>
		<div class="problem-box">
			<h5>今日短期问题</h5>
			@foreach ($Data['campuses'][1]['problems'] as $problem)
			<div @click="showDetails({{$problem['params']}})">
				<mt-cell title="{{$problem['problem_type']}}" label="{{$problem['remark']}}" is-link>
					@if ($problem['is_handled'] == '1')
						<i class="mint-toast-icon mintui mintui-field-success text-success"></i>
					@else
						<i class="mint-toast-icon mintui mintui-field-warning text-warning"></i>
				   	@endif
				</mt-cell>
			</div>
			@endforeach
			<h5>长期待跟进问题</h5>
			@foreach ($Data['campuses'][1]['long_problems'] as $problem)
			<div @click="showDetails({{$problem['params']}})">
				<mt-cell title="{{$problem['problem_type']}}" label="{{$problem['remark']}}" is-link>
					@if ($problem['is_handled'] == '1')
						<i class="mint-toast-icon mintui mintui-field-success text-success"></i>
					@else
						<i class="mint-toast-icon mintui mintui-field-warning text-warning"></i>
				   	@endif
				</mt-cell>
			</div>
			@endforeach
		</div>

		<!-- 其他 -->
		<div class="chart-header">
			<mt-cell title="{{$Data['campuses'][2]['campus']}}"
			 	value="发现:{{$Data['campuses'][2]['find']}}|处理:{{$Data['campuses'][2]['solve']}}|处理率:{{$Data['campuses'][2]['rate']}}">
		 	</mt-cell>
		</div>
		<div id="chart_5" style="width: 300px;height:300px;margin:0 auto;"></div>
		<div id="chart_6" style="width: 300px;height:300px;margin:0 auto;"></div>
		<mt-radio
		  :value.sync="chart_type[2]" @change="chartToggleShow" :options="radio_opts">
		</mt-radio>
		<div class="problem-box">
			<h5>今日短期问题</h5>
			@foreach ($Data['campuses'][2]['problems'] as $problem)
			<div @click="showDetails({{$problem['params']}})">
				<mt-cell title="{{$problem['problem_type']}}" label="{{$problem['remark']}}" is-link>
					@if ($problem['is_handled'] == '1')
						<i class="mint-toast-icon mintui mintui-field-success text-success"></i>
					@else
						<i class="mint-toast-icon mintui mintui-field-warning text-warning"></i>
				   	@endif
				</mt-cell>
			</div>
			@endforeach
			<h5>长期待跟进问题</h5>
			@foreach ($Data['campuses'][2]['long_problems'] as $problem)
			<div @click="showDetails({{$problem['params']}})">
				<mt-cell title="{{$problem['problem_type']}}" label="{{$problem['remark']}}" is-link>
					@if ($problem['is_handled'] == '1')
						<i class="mint-toast-icon mintui mintui-field-success text-success"></i>
					@else
						<i class="mint-toast-icon mintui mintui-field-warning text-warning"></i>
				   	@endif
				</mt-cell>
			</div>
			@endforeach
		</div>

        <div class="large-btn-box">
            <mt-button type="primary" size="large" @click="saveAsPng" :disabled="canSaveAsPng">@{{btn_text}}</mt-button>
        </div>
    </div>
    <mt-datetime-picker
        :visible.sync="pickerVisible"
        :value.sync="pickerValue"
        @confirm="handlePickerConfirm"
        type="date"
        year-format="{value} 年"
        month-format="{value} 月"
        date-format="{value} 日">
    </mt-datetime-picker>
	<div class="my-popup-box">
		<mt-popup :visible.sync="popupVisible" position="right">
			<div class="pop-ct">
				<mt-header fixed title="问题详情">
			        <mt-button icon="back" slot="left" @click="popupVisible = false;">返回</mt-button>
			    </mt-header>
				<div class="popup-content">
					<table class="table table table-hover table-condensed">
						<tr>
							<th>校区</th>
							<td style="border:0;">@{{popupData.campus}}</td>
						</tr>
						<tr>
							<th>问题类型</th>
							<td>@{{popupData.problem_type}}</td>
						</tr>
						<tr>
							<th>是否解决</th>
							<td>
								<span v-if="popupData.is_handled == '1'" class="text-success">是</span>
								<span v-else class="text-warning">否</span>
							</td>
						</tr>
						<tr>
							<th>归属处理部门/实际处理人</th>
							<td>@{{popupData.depart_name}} / @{{popupData.admin_name}}</td>
						</tr>
					</table>
					<table class="table">
						<tr>
							<th>问题描述：</th>
						</tr>
					</table>
					<p style="text-indent:2rem;">@{{popupData.ques_desc}}</p>
					<table class="table">
						<tr>
							<th>备注：</th>
						</tr>
					</table>
					<p style="text-indent:2rem;">@{{popupData.mark}}</p>
				</div>
			</div>
		</mt-popup>
	</div>
</div>
</body>

<script type="text/javascript">
let main = new Vue({
    el:"#main",
    data:{
		btn_text:"保存为日报图片",
		header_title:"{{$date}}",
		pickerValue:"{{$date}}",
		chart_type:["0","0","0"],
		radio_opts:[
			{label:"种类/是否处理",value:"0"},
			{label:"处理部门/是否处理",value:"1"}
		],
        pickerVisible:false,
		popupVisible:false,
        canSaveAsPng:false,
		popupData:{
			campus:"",problem_type:"",is_handled:"",ques_desc:"",depart_name:"",mark:""
		},
		charts:[],
		chartOpts:[{
			title:{
				text:"校区问题总数趋势",
				x:"center",y:0,
				textStyle:{
				    fontWeight:"500",
					fontFamily:"Microsoft YaHei",
					fontSize:"20"
				}
			},
			tooltip: {
				trigger: 'axis'
			},
			legend:{
				data:["C86总计：123","七彩总计：456"],
				x:"center",y:32
			},
			xAxis: {
		        boundaryGap: false,
				splitNumber:7,
				data: ['周一','周二','周三','周四','周五','周六','周日']
			},
			yAxis: {
				type: 'value'
			},
			series: [{
				name:'C86总计：123',
				type:'line',
				data:[6,5,4,3,2,1,0],
			},{
				name:'七彩总计：456',
				type:'line',
				data:[6,5,4,3,2,1,0],
			}]
		},{
		    series:[{
	            type:'pie',
	            radius:'40%',
	            center:['50%','50%'],
	            data:[
	                {value:1, name:'环境问题\n(未处理)\n1,12%'},
	                {value:14, name:'环境问题\n(已处理)\n14,12%'},
	                {value:12, name:'行为习惯\n(已处理)\n12,12%'},
	                {value:18, name:'严重拖堂\n(已处理)\n18,12%'},
	            ],
	        }]
		},{
		    series:[{
	            type:'pie',
	            radius:'40%',
	            center:['50%','50%'],
	            data:[
	                {value:1, name:'校务后勤\n(未处理)\n1,12%'},
	                {value:14, name:'校务后勤\n(已处理)\n14,12%'},
	                {value:12, name:'教学部\n(已处理)\n12,12%'},
	                {value:18, name:'德育部\n(已处理)\n18,12%'},
	            ],
	        }]
		},{
		    series:[{
	            type:'pie',
	            radius:'40%',
	            center:['50%','50%'],
	            data:[
	                {value:1, name:'环境问题\n(未处理)\n1,12%'},
	                {value:14, name:'环境问题\n(已处理)\n14,12%'},
	                {value:12, name:'行为习惯\n(已处理)\n12,12%'},
	                {value:18, name:'严重拖堂\n(已处理)\n18,12%'},
	            ],
	        }]
		},{
		    series:[{
	            type:'pie',
	            radius:'40%',
	            center:['50%','50%'],
	            data:[
	                {value:1, name:'校务后勤\n(未处理)\n1,12%'},
	                {value:14, name:'校务后勤\n(已处理)\n14,12%'},
	                {value:12, name:'教学部\n(已处理)\n12,12%'},
	                {value:18, name:'德育部\n(已处理)\n18,12%'},
	            ],
	        }]
		},{
		    series:[{
	            type:'pie',
	            radius:'40%',
	            center:['50%','50%'],
	            data:[
	                {value:1, name:'校务后勤\n(未处理)\n1,12%'},
	                {value:14, name:'校务后勤\n(已处理)\n14,12%'},
	                {value:12, name:'教学部\n(已处理)\n12,12%'},
	                {value:18, name:'德育部\n(已处理)\n18,12%'},
	            ],
	        }]
		},{
		    series:[{
	            type:'pie',
	            radius:'40%',
	            center:['50%','50%'],
	            data:[
	                {value:1, name:'校务后勤\n(未处理)\n1,12%'},
	                {value:14, name:'校务后勤\n(已处理)\n14,12%'},
	                {value:12, name:'教学部\n(已处理)\n12,12%'},
	                {value:18, name:'德育部\n(已处理)\n18,12%'},
	            ],
	        }]
		}]
    },
    created:function() {
		for(i in this.chartOpts){
			this.charts.push(echarts.init(document.querySelector('#chart_'+i),"candf"));
		}
        this.init();
		this.drawCharts();
    },
    methods:{
        init() {
            // if(new Date().getHours() < 22){
            //     this.canSaveAsPng = true;
			// 	this.btn_text = "22点后可保存为日报图片"
            // }
			this.chartToggleShow();
			this.ajaxGetData();
        },
        handlePickerConfirm(value) {
            let t = this.Dateformat("yyyy-MM-dd",value);
            this.pickerValue = t;
            let url = "{{URL::asset('admin/xc_report?date=')}}"+t;
			this.goTo(url);
        },
        saveAsPng() {
            let url = "{{URL::asset('admin/xc_report?date=')}}"+this.header_title;
			url += "&is_mobile=from_mobile";
			url += "&chart_type0="+this.chart_type[0];
			url += "&chart_type1="+this.chart_type[1];
			window.open(url);
        },
        Dateformat(fmt,date) {
            let o = {
                "M+" : date.getMonth()+1,                 //月份
                "d+" : date.getDate(),                    //日
                "h+" : date.getHours(),                   //小时
                "m+" : date.getMinutes(),                 //分
                "s+" : date.getSeconds(),                 //秒
                "q+" : Math.floor((date.getMonth()+3)/3), //季度
                "S"  : date.getMilliseconds()             //毫秒
            };
            if(/(y+)/.test(fmt)) {
                fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
            }
            for(let k in o) {
                if(new RegExp("("+ k +")").test(fmt)){
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                }
            }
            return fmt;
        },
        goTo(url){
            window.location.href = url;
        },
		chartToggleShow() {
			if(this.chart_type[0] == "0"){
				$("#chart_1").show();
				$("#chart_2").hide();
			}else{
				$("#chart_2").show();
				$("#chart_1").hide();
			}
			if(this.chart_type[1] == "0"){
				$("#chart_3").show();
				$("#chart_4").hide();
			}else{
				$("#chart_4").show();
				$("#chart_3").hide();
			}
			if(this.chart_type[2] == "0"){
				$("#chart_5").show();
				$("#chart_6").hide();
			}else{
				$("#chart_6").show();
				$("#chart_5").hide();
			}
		},
		drawCharts() {
			for(i in this.charts){
				this.charts[i].setOption(this.chartOpts[i]);
			}
		},
		showDetails(params) {
			this.popupData = params;
			this.popupVisible = true;
		},
		ajaxGetData() {
			let url = "{{URL::asset('admin/xc_report/get_chart_data')}}";
			let params = {
				_token:"{{ csrf_token() }}",
				date:this.header_title,
			}
			$.post(url,params,function(res){
				if(res.code == 1){
					main.chartOpts[0].xAxis.data = res.data.x_data;
					main.chartOpts[0].series = res.data.series_0;
					main.chartOpts[0].legend.data = res.data.legend_0;
					main.chartOpts[1].series[0].data = res.data.series_1;
					main.chartOpts[2].series[0].data = res.data.series_2;
					main.chartOpts[3].series[0].data = res.data.series_3;
					main.chartOpts[4].series[0].data = res.data.series_4;
					main.chartOpts[5].series[0].data = res.data.series_5;
					main.chartOpts[6].series[0].data = res.data.series_6;
					main.chartOpts[1].color = res.data.color_1;
					main.chartOpts[2].color = res.data.color_2;
					main.chartOpts[3].color = res.data.color_3;
					main.chartOpts[4].color = res.data.color_4;
					main.chartOpts[5].color = res.data.color_5;
					main.chartOpts[6].color = res.data.color_6;
					main.drawCharts();
				}else{
					main.$toast(res.msg);
				}
			});
		}
    }
})
</script>
